<template>
  <div id="app">
    <!-- <img src="./assets/logo.png"> -->

    <view-box>
        <x-header slot="header" :left-options="{showBack:false}">
            <div slot="left">直播</div>
            <div class="">网易</div>
            <div slot="right">搜索</div>
        </x-header>
        <scroller :lock-y="true">
            <div class="tab">
                <tab>
                    <tab-item selected>推荐</tab-item>
                    <tab-item>要闻</tab-item>
                    <tab-item>游戏</tab-item>
                    <tab-item>科技</tab-item>
                    <tab-item>娱乐</tab-item>
                    <tab-item>体育</tab-item>
                </tab>
            </div>
        </scroller>

        <tabbar slot="bottom">
            <tabbar-item>
                <img src="./assets/icon_nav_button.png" alt="" slot="icon">
                <span slot="label">首页</span>
            </tabbar-item>
            <tabbar-item>
                <img src="./assets/icon_nav_msg.png" alt="" slot="icon">
                <span slot="label">推荐</span>
            </tabbar-item>
            <tabbar-item>
                <img src="./assets/icon_nav_article.png" alt="" slot="icon">
                <span slot="label">我的</span>
            </tabbar-item>
            <tabbar-item>
                <img src="./assets/icon_nav_cell.png" alt="" slot="icon">
                <span slot="label">111</span>
            </tabbar-item>
        </tabbar>

    </view-box>


  </div>
</template>

<script>
import {ViewBox,XHeader,Tabbar, TabbarItem,Tab,TabItem,Scroller} from 'vux';

export default {
  name: 'app',
  components: {
      ViewBox,
      XHeader,
      Tabbar,
      TabbarItem,
      Tab,
      TabItem,
      Scroller
  }
}
</script>

<style lang="less">
    @import '~vux/src/styles/reset.less';

    html,body {
        margin: 0;
        width: 100%;
        height: 100%;
        overflow-x: hidden;
    }
    #app {
        height: 100%;

        .tab {
            width: 1200px;
        }
    }
</style>
